<template>
  <el-dialog title="编辑弹层" :visible="showDialog" @before-close="btnCancel">
    <el-form
      ref="roleForm"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="formData.description" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import { editRoleAPI, addRoleAPI } from '@/api/settings'
import { IRole } from '@/model/interface/role'
import { Form as ElFrom } from 'element-ui'

@Component({ name: 'AddRole' })
export default class extends Vue {
  // 弹层状态
  @Prop({
    type: Boolean,
    required: true
  })
  showDialog = false

  // 表单数据
  @Prop({
    type: Object,
    required: true
  })
  formData!: IRole /* = {
    name: '',
    description: ''
  } */

  rules = {
    name: [],
    description: []
  } // 表单校验规则

  // 取消操作
  btnCancel() {
    this.$message.info('取消操作')
    this.resetFn()
  }

  // 提交按钮
  @Emit('reload')
  async btnOK() {
    const { id } = this.formData
    // 有 id 为修改，无则新增
    id ? await editRoleAPI(id, this.formData) : await addRoleAPI(this.formData)
    this.$message.success('操作成功')
    this.resetFn()
  }

  // 重置操作
  @Emit('update:show-dialog')
  resetFn() {
    (this.$refs.roleForm as ElFrom).resetFields() // 重置表单
    return false
  }
}
</script>
